// function userAdminInsPage() {
//     $('#box').html(`
//         <div class="page-header">
//           <div class="row align-items-center">
//             <div class="col">
//               <h3 class="page-title">添加用户</h3>
//               <ul class="breadcrumb">
//                 <li class="breadcrumb-item"><a href="index.html">首页</a></li>
//                 <li class="breadcrumb-item active">添加用户</li>
//               </ul>
//             </div>
//           </div>
//         </div>
//                       <!-- /Page Header -->
//         <div class="row">
//           <div class="col-sm-12">
//             <div class="card">
//               <div class="card-body">
//                 <form onsubmit="return false" id="from">
//                   <div class="row">
//                     <div class="col-12">
//                       <h5 class="form-title"><span>请输入用户信息</span></h5>
//                     </div>
//                     <div class="col-12 col-sm-6">
//                       <div class="form-group">
//                         <label>用户</label>
//                         <input type="text" name="userName" required>
//                       </div>
//                     </div>
//                     <div class="col-12 col-sm-6">
//                       <div class="form-group">
//                         <label>性别</label>
//                         <input type="text" name="sex" required>
//                       </div>
//                     </div>
//                     <div class="col-12 col-sm-6">
//                       <div class="form-group">
//                         <label>年龄</label>
//                         <input type="text" name="age" required>
//                       </div>
//                     </div>
//                     <div class="col-12 col-sm-6">
//                       <div class="form-group">
//                         <label>账号</label>
//                         <input type="text" name="account" required>
//                       </div>
//                     </div>
//                     <div class="col-12 col-sm-6">
//                       <div class="form-group">
//                         <label>密码</label>
//                         <input type="text" name="password" required>
//                       </div>
//                     </div>
//                    </div>
//                    <div class="col-12">
//                      <button type="submit" class="btn btn-primary"  id="addBtn" onclick="userAdminIns()">添加<tton>
//                    </div>
//                  </div>
//                </form>
//              </div>
//            </div>
//           </div>
//         </div>
//     `);
// }
// function userAdminIns() {
//     $.ajax({
//         url:'/admin/userIns',
//         type:'post',
//         dataType:'json',
//         data:$('#from').serialize(),
//         success:(res)=>{
//             alert("新增成功");
//             userAdminInsPage();
//         }
//     })
// }
function userPage(startIndex,size) {

    let msg=$('#searchUser').val();
    if (msg==undefined){
        msg='';
    }

    $.ajax({
        url:'/admin/userPage',
        type:'get',
        data: {startIndex:startIndex,size:size,str:msg},
        dataType:'json',
        success:(res)=>{
            console.log(res);

            //准备渲染表单
            let str=``;
            let list=res.data.records;
            for (let i=0;i<list.length;i++){
                let time=''+list[i].createTime;
                time=time.replaceAll("T"," ");
                time=time.replaceAll(".000+00:00","");

                list[i].age = list[i].age==null?list[i].age="":list[i].age;
                list[i].userName=list[i].userName==null?list[i].userName="":list[i].userName;
                str+=`
                        <tr>
                          <td class="text-center"><input type="checkbox" name="delList" value="${list[i].id}"></td>
                          <td>${i+1}</td>
                          <td>${list[i].userName}</td>
                          <td style="color: deepskyblue">${list[i].sex}</td>
                          <td style="color: deeppink">${list[i].age}</td>
                          <td style="color: deeppink">${list[i].account}</td>
                          <td>${time}</td>
                          <td>
                            <div class="actions">
                                <a href="javascript:void()" onclick="openUpdateUser(${list[i].id})" class="btn btn-sm bg-success-light">
                                    <i class="fas fa-pen"></i>
                                </a>
                                <a href="javascript:void()" onclick="userDel(${list[i].id})" class="btn btn-sm bg-danger-light">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                          </td>
                        </tr>
                     `;
            }
            //表单基础数据准备完毕
            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1;
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="userPage(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='userPage('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='userPage('+(res.data.current+1)+','+size+')';
            }
            //定义分页结束
            //开始渲染数据
            $('#box').html(`
                <div class="page-header">
                  <div class="row align-items-center">
                    <div class="col">
                      <h3 class="page-title">用户信息</h3>
                      <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                        <li class="breadcrumb-item active">用户信息</li>
                      </ul>
                    </div>
                  </div>
                </div>


                <!-- /Page Header -->
                <div class="row">
                  <div class="col-sm-12">
                    <div class="card card-table">
                      <div class="card-body">
                        <div class="table-responsive">
                          <div class="top-nav-search">
                            <form onsubmit="return false">
                              <input type="text" class="form-control" placeholder="请输入用户名" id="searchUser" value="${msg}">
                              <button class="btn" onclick="userPage(1,5)"><i class="fas fa-search"></i></button>
                            </form>
                          </div>
                          <table class="table table-hover table-center mb-0 datatable">
                            <thead>
                              <tr>
                                <th><a href="javascript:void(0)" onclick="userDelIds()" class="btn btn-sm bg-danger-light"><span style="color: red">批量删除</span></i></th>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>账号</th>
                                <th>创建时间</th>
                                <th>操作</th>
                              </tr>
                            </thead>
                            <tbody>
                                ${str}
                            </tbody>
                          </table>
                        </div>
                        <div style="text-align: right;margin-top: 20px">
                            <div style="float: left;display: inline-block">
                                总记录数: <span style="color: purple">${res.data.total} </span> ,
                                总页数: <span style="color: #0e72a2"> ${res.data.pages} </span>,
                                当前页: <span style="color: red">${res.data.current}</span>
                            </div>
                            <div style="display: inline-block;margin-right:100px">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                      <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                        </a>
                                      </li>
                                      ${pages}
                                      <li class="page-item" onclick="${after}">
                                        <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                        </a>
                                      </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            `);
            //渲染数据结束
        },
        error:()=>{
            alert("您的数据仿佛不存在")
        }
    })
}
function userDel(id) {
    $.ajax({
        url:'/admin/userDel/'+id,
        type:'delete',
        dataType:'json',
        success:(res)=>{
            userPage(1,12);
        }
    })

}


//批量删除
function userDelIds() {
    let list = document.getElementsByName("delList");
    console.log(list);
    let ids=[];
    for(var i=0;i<list.length;i++){
        if(list[i].checked == true){
            ids[ids.length]=list[i].value;
        }
    }
    $.ajax({
        url:'/admin/userDelIds',
        type:'delete',
        data: {ids:ids},
        dataType:'json',
        success:(res)=>{
            userPage(1,12);
        }
    })
}
function openUpdateUser(id) {

    $.ajax({
        url:'/admin/userQueryById/'+id,
        type: 'get',
        dataType:'json',
        success:(res)=>{
            console.log(res)
            $('#box').append(`
                <form onsubmit="return false" id="form1">
                    <!-- 弹出框 -->
                    <div class="popup" id="popup">
                      <div class="form-wrapper">
                        <h2>用户信息表单</h2>
                
                        <label for="name">用户名</label>
                        <input type="text" id="name" name="userName">
                
                        <label for="email">性别</label>
                        <input type="text" id="email" name="sex">
                
                        <label for="email">年龄</label>
                        <input type="text" id="email" name="age">

                        <div class="form-buttons">
                          <button class="close-button" onclick="closePopup()">关闭</button>
                          <button class="submit-button" onclick="submitUserForm(${id})">提交</button>
                        </div>
                      </div>
                    </div>
                </form>
            `)
        }
    })
}
function submitUserForm(id) {

    $.ajax({
        url:'/admin/userUpdate/'+id,
        type:'post',
        dataType:'json',
        data:$('#form1').serialize(),
        success:()=>{
            // 提交表单
            alert("您的信息已成功提交！");
            userPage(1,12)
        }
    })
}